<template>
    <view class="pay-success">
        <view class="pay-success__tip" v-if="tip && purchanseList.length > 1">
            <view class="content">
                <icon class="iconfont icon">&#xe8c0;</icon>
                <text>当前订单已自动拆分为两条订单。</text>
            </view>
            <icon class="iconfont icon" @tap="tip = false">&#xe650;</icon>
        </view>
        <view class="pay-success__details">
            <image :src="'purchanse-cart/pay-success.png' | prefixOssUrl"></image>
            <view class="success">订单支付成功！</view>
            <view v-for="(item, index) in purchanseList" :key="index"><text
                    :class="item.type === 1 && 'newOrders'">{{ item.type === 1 ? "新订单" : "预售订单" }}：</text>{{ item.sn }}
            </view>
        </view>

        <view class="pay-success__view-order" @tap="red(`/subpackage/order/pages/purchanse/_id?id=${purchanseList[0].id}`)">
            查看订单
        </view>
        <view class="pay-success__another-order" @tap="swi(`/pages/cart/index`)"> 再来一单 </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                tip: true,
                purchanseList: [],
            };
        },
        onLoad(params) {
            this.purchanseList = JSON.parse(decodeURIComponent(params.purchanseList));
        },
    };
</script>
<style lang="less" scoped>
    .pay-success {
        min-height: 100vh;
        background: #eee;

        view {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .pay-success__tip {
            position: absolute;
            z-index: 10;
            padding: 0 30rpx;
            height: 90rpx;
            background-color: #fff3cd;
            color: #ff8500;
            box-sizing: border-box;

            .icon {
                margin-top: -13rpx;
                font-size: 36rpx;
            }

            .content {
                display: flex;
                align-items: center;
                width: auto;
                font-size: 28rpx;
                color: #ff8500;

                text {
                    margin-left: 18rpx;
                }
            }
        }

        .pay-success__details {
            position: absolute;
            top: 0;
            flex-direction: column;
            justify-content: center;
            height: 100%;

            image {
                margin-top: -257rpx;
                width: 118rpx;
                height: 118rpx;
            }

            >view {
                justify-content: center;
                margin-bottom: 5rpx;
                font-size: 28rpx;
                color: #333;

                text {
                    color: #666;
                }
                .newOrders{
                  :before{
                    content: '预';
                    opacity: 0;
                  }
                }
            }

            .success {
                margin: 20rpx 0 29rpx;
                font-size: 36rpx;
                font-weight: bold;
                color: #080808;
            }
        }

        .pay-success__view-order,
        .pay-success__another-order {
            position: fixed;
            justify-content: center;
            width: calc(100% - 150rpx);
            margin: 0 75rpx;
            height: 90rpx;
            font-size: 34rpx;
            border-radius: 6rpx;
        }

        .pay-success__view-order {
            bottom: 300rpx;
            color: #686868;
            box-shadow: 0 0 0 2rpx #d1d1d1;
        }

        .pay-success__another-order {
            bottom: 180rpx;
            background: #db187c;
            color: #fff;
        }
    }
</style>